<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
  <div id="someway" class="any some area1"></div>
  <div id="area" class="any some area1"></div>
    <button id="change" data-target="#area">change</button>
    <button id="anyway" data-target="#someway">way</button>
    <div id="content" class="content"></div>
    <button id="move">move</button>

    <div>-----------分割几千年----------</div>
    <button id="a">a</button>
    <style>
      .content {
        width: 200px;
        height: 80px;
        background-color: rebeccapurple;
      }

      .any {
        border: solid 5px purple;
      }

      .area1 {
        width: 200px;
        height: 80px;
        background-color: brown;
      }

      .area2 {
        width: 40px;
        height: 30px;
        opacity: 0.5;
        background-color: green;
      }

      .area3 {
        width: 80px;
        height: 70px;
        opacity: 0.7;
        background-color: blueviolet;
      }
    </style>
    <!--  1-2 2-3 3-1 -->
    <script>
      // c.addEventListener("click", () => {
      //     let r = document.querySelector("#area");
      //     console.log(r.classList);
      //     console.log(r.classList.contains("anyone"))
      //     r.classList.remove("area1");
      //     r.classList.add("area2");
      //     // r.classList.toggle("area1")切换
      // })

      // console.log("------", c);
      class ToggleRunner {
        elementNode;
        state = 1;
        r;
        constructor(node) {
          this.elementNode = node;
          this.state = 1;
          this.r = document.querySelector(node.dataset.target);
          this.elementNode.addEventListener("click", this.listen.bind(this));
          // console.log("000", this.r, this.state, this.elementNode);
          this.elementNode.addEventListener("focus", this.switch.bind(this));
          this.elementNode.addEventListener("blur", this.switch.bind(this));
        }
        switch(event) {
          console.log("-------");
          console.log(event);
          this.publicSwitch();
        }
        publicSwitch() {
          this.r.classList.toggle("any");
        }
        // go(){
        //   // c.addEventListener("click", this.listen);
        //   // console.log(this.r, this.state, this.elementNode);
        //   console.log(this);
        // }
        publicListen() {
          if (this.state === 1) {
            this.state = 2;
            this.r.classList.remove("area1");
            this.r.classList.remove("area2");
            this.r.classList.remove("area3");
            this.r.classList.add("area2");
          } else if (this.state === 2) {
            this.state = 3;
            this.r.classList.remove("area1");
            this.r.classList.remove("area2");
            this.r.classList.remove("area3");
            this.r.classList.add("area3");
          } else if (this.state === 3) {
            this.state = 1;
            this.r.classList.remove("area1");
            this.r.classList.remove("area2");
            this.r.classList.remove("area3");
            this.r.classList.add("area1");
          }
        }
        listen(event) {
          // let r = document.querySelector("#area");
          // let r =
          console.log("0000000", this);
          console.log(this.r, this.state, this.elementNode);
          this.publicListen();
        }
      }
      class TogglePicker {}
      let bs = {
        ToggleRunner,
        TogglePicker,
      };

      // let c = document.querySelector("#change");
      // let p = document.querySelector("#anyway");
      let s = document.querySelectorAll("[data-target]");
      console.log("----", s);
      [...s].forEach((x) => new bs.ToggleRunner(x));
      // new bs.ToggleRunner(p);
      // let ccc = new bs.ToggleRunner(c);
      // setInterval(() => {
      //   // c.click();
      //   // ccc.publicListen();
      //   // ccc.publicSwitch();
      // }, 1000);

      // let s =
      // new ToggleRunner(c);
      // s.go()
      // s.listen()
      // c.addEventListener("click", s.listen);
      /*  let state = 1;
      c.addEventListener("click", () => {

        let r = document.querySelector("#area");
        if (state === 1) {
          state = 2;
          r.classList.remove("area1");
          r.classList.remove("area2");
          r.classList.remove("area3");
          r.classList.add("area2");

        } else if (state === 2) {
          state = 3;
          r.classList.remove("area1");
          r.classList.remove("area2");
          r.classList.remove("area3");
          r.classList.add("area3");

        } else if (state === 3) {
          state = 1;
          r.classList.remove("area1");
          r.classList.remove("area2");
          r.classList.remove("area3");
          r.classList.add("area1");
        }
      })*/

      document.querySelector("#move").addEventListener("click", () => {
        let content = document.querySelector("#content");
        // console.log(content);
        // style="transform:translateX(100px);background-color:red"
        content.style.transform = "translateX(100px)";
        content.style.backgroundColor = "red";
      });
      // let aaaa = document.querySelector("#a")
      // aaaa.addEventListener("click",()=>{
      //   ccc.publicSwitch();
      // })
    </script>
  </body>
</html>
